<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>UserTab</title>
	<link rel="stylesheet" type="text/css" href="${ctx}/libs/jquery-easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/libs/jquery-easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/libs/jquery-easyui/demo/demo.css">
	
	<link rel="stylesheet" type="text/css" href="${ctx}/css/dialog.css">
	
	<script type="text/javascript" src="${ctx}/libs/jquery-easyui/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/libs/jquery-easyui/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/libs/jquery-easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctx}/libs/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
	
	<script type="text/javascript" src="${ctx}/libs/jooe.core.js"></script>
	<script type="text/javascript" src="${ctx}/js/userTab.js"></script>
	<script type="text/javascript">
	$(function(){
		// 实例化对象并加载数据
		var userTab = new UserTab({
			namespace : '${ctx}',
			gridId : 'dg',
			toolbar : 'toolbar',
			dlg: 'dlg',
			dlgButtons : 'dlgButtons'
		});
		userTab.initData();
	});
	</script>
</head>
<body>
	<table id="dg" title="xx列表" class="easyui-datagrid" style="width:800px;height:450px"
		url="ajaxPage"
		toolbar="#toolbar"
		idField="userId" fitColumns="true" singleSelect="true"
		rownumbers="true" pagination="true" striped="true">
	    <thead>
			<tr>
                    <th data-options="field:'userId',width:80">userId</th>
                    <th data-options="field:'address',width:255">address</th>
                    <th data-options="field:'age',width:80">age</th>
                    <th data-options="field:'birthday',width:80">birthday</th>
                    <th data-options="field:'gender',width:80">gender</th>
                    <th data-options="field:'userName',width:255">userName</th>

			</tr>
	    </thead>
	</table>
	
	<div id="toolbar" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
			<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
			<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
			<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="javascript:$('#dg').datagrid('reload')">刷新</a>
		</div>
		<div>
			条件: <input name="" class="easyui-textbox" style="width:100px">
			<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search">查询</a>
		</div>
	</div>
	
	<!-- ############################  添加信息区域    ######################################### -->
	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
		closed="true" buttons="#dlgButtons">
		
		<form method="post">
            <input type="hidden" name="userId">
            <div class="fitem"><label>address:</label><input name="address" ></div>
            <div class="fitem"><label>age:</label><input name="age" ></div>
            <div class="fitem"><label>birthday:</label><input name="birthday" class="easyui-datetimebox" required="true"></div>
            <div class="fitem"><label>gender:</label><input name="gender" ></div>
            <div class="fitem"><label>userName:</label><input name="userName" ></div>

		</form>
	</div>
	<div id="dlgButtons">
		<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
		<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
	</div>
</body>
</html>